import React, { FC } from "react"
import { Outlet, useLocation, useNavigate } from "react-router-dom"
import { Button, Space, Divider, message } from "antd"
import { PlusOutlined, BarsOutlined, StarOutlined, DeleteOutlined } from "@ant-design/icons"
import classNames from "classnames"

import styles from "./MangeLayout.module.scss"
import { createQuestionService } from "../../services/question"
import { useRequest } from "ahooks"

const ManageLayout: FC = () => {
    const nav = useNavigate()
    // 获取当前页面路由
    const { pathname } = useLocation()

    // 创建状态
    // const [loading, setLoading] = useState(false)
    // async function handleCreateClick() {
    //     // 点击创建就将状态改为true
    //     setLoading(true)

    //     const data = await createQuestionService()
    //     const { id } = data || {}
    //     if (id) {
    //         // 跳转到编辑页面
    //         nav(`/question/edit/${id}`)
    //         message.success("创建成功")
    //     }

    //     // 创建完成改为false
    //     setLoading(false)
    // }

    // 手动触发（点击按钮才触发）
    // 不需要二次封装，因为不需要参数
    // run: handleCreateClick这里是重命名
    const {
        loading,
        // error,
        run: handleCreateClick
    } = useRequest(createQuestionService, {
        manual: true,
        onSuccess(result) {
            // console.log(result)
            // 请求返回的result就是结果
            nav(`/question/edit/${result.id}`)
            message.success("创建成功")
        }
    })

    return (
        <div className={styles.container}>
            <div className={styles.left}>
                {/* 添加间隙 */}
                <Space direction="vertical">
                    <Button type="primary" size="large" icon={<PlusOutlined />} onClick={() => handleCreateClick()} disabled={loading}>
                        创建问卷
                    </Button>
                    {/* 分割线，将线条改为透明就看不到了 */}
                    <Divider style={{ borderTop: "transparent" }} />
                    <Button
                        className={classNames({ [styles.active]: pathname.startsWith("/manage/list") })}
                        type="default"
                        size="large"
                        icon={<BarsOutlined />}
                        onClick={() => nav("/manage/list")}
                    >
                        我的问卷
                    </Button>
                    <Button
                        className={classNames({ [styles.active]: pathname.startsWith("/manage/star") })}
                        type="default"
                        size="large"
                        icon={<StarOutlined />}
                        onClick={() => nav("/manage/star")}
                    >
                        星标问卷
                    </Button>
                    <Button
                        className={classNames({ [styles.active]: pathname.startsWith("/manage/trash") })}
                        type="default"
                        size="large"
                        icon={<DeleteOutlined />}
                        onClick={() => nav("/manage/trash")}
                    >
                        回收站
                    </Button>
                </Space>
            </div>
            <div className={styles.right}>
                {/* 路由占位符 */}
                <Outlet />
            </div>
        </div>
    )
}

export default ManageLayout
